{% extends "base.html" %}
{% load staticfiles %}

{% block title %}我的策略{% endblock %}

{% block styles %}
    <style>

        /*表头上方的按钮样式*/
        .add-stg, .del-stg {
            width: 100px;
            height: 34px;
            margin-left: 15px;
            border-radius: 6px;
            color: white;
            border: 1px solid #ed8419;
        }

        .add-stg:hover, .del-stg:hover {
            background-color: #ed8419;
        }

        .add-stg {
            background-color: #ed6d00;
        }

        .del-stg {
            background-color: #d9534f;
        }

        /*toolbar样式*/
        .toolbar {
            margin-right: 150px;
        }

    </style>

{% endblock %}

{% block content %}

    {#新建策略模态框#}
    <div class="modal fade" data-backdrop="static" id="create-stg" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新建策略</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%; display: block">
                            <label>策略名称</label>
                            <input class="opts" id="stgname" name="stgname" type="text"
                                   placeholder="请输入策略名称">
                            <div id="stgname_upload_spaninfo" class="input-validation"></div>
                        </div>
                        <hr/>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                                <span class="btn-cancel btn-stc" onclick="fade_btn()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                                <span class="btn-confirm btn-stc" onclick="add_stg()">提交</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {#策略删除模态框#}
    <div class="modal fade" data-backdrop="static" id="delete-stg" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除策略</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%; display: block" id="del-stg">
                            确认删除策略
                        </div>
                        <hr/>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                                <span class="btn-cancel btn-stc" onclick="fade_btn()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                                <span id="del-commit" class="btn-confirm btn-stc" onclick="del_stg()">提交</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <body>
    <section class="content">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active" style="margin-top:10px"><a href="#fa-pack" data-toggle="tab">我的策略</a></li>
            </ul>
            <div id="toolbar" class="toolbar">
                <button class="add-stg" onclick="add_()">新建策略</button>
            </div>
            <div class="tab-content">
                <!--我的策略头部-->
                <div class="tab-pane active" id="fa-hpquery">
                    <div style="float: left;color: red;margin-left: 174px;margin-top: -10px; display: none"
                         id="date_spaninfo"></div>
                    <table class="table-demo" id="StgTable">
                    </table>
                </div>
            </div>
        </div>
    </section>
    </body>
{% endblock %}

{% block scripts %}

    <script type="text/javascript">
        var columns = [
            {
                field: "StgID",
                title: "策略id",
                sortable: true //设置库存列可以排序
                {#visible: false#}
            }, {
                field: "StgName",
                title: "策略名",
                {#width: 100#}
            }, {
                field: "CustomerID",
                title: "创建者"
            }, {
                field: "CreateTime",
                title: "创建时间",
                formatter: function (data, row, index) {
                    return data.split("T").join(" ")
                }
            }, {
                field: "Option",
                title: "操作",
                formatter: function (data, row, index) {
                    const del = "<span title='删除' onclick=\"del_('" + row.StgID + "')\" class='glyphicon glyphicon-trash' style='cursor: pointer'></span>&nbsp;&nbsp; ";
                    const stg_code = "&nbsp;<a title='代码策略' href='/detail/?stgid="+ row.StgID + "' class='glyphicon glyphicon-pencil' style='cursor: pointer'></a>&nbsp;&nbsp; ";
                    const app_paper = "&nbsp;<span title='申请仿真' onclick=\"del_('" + row.StgID + "')\" class='glyphicon glyphicon-check' style='cursor: pointer'></span> ";
                    return del + stg_code + app_paper
                }
            }
        ]

        $(function () {
            getData()
        })

        //获取策略数据
        function getData() {
            $.ajax({
                url: '/stg_serarch/',
                type: "post",
                success: function (data) {
                    if (data["type"] === 1) {
                        loadoff()
                        //初始化 bootstrap table
                        $("#StgTable").bootstrapTable("destroy").bootstrapTable({
                            {#clickToSelect:true,#}
                            columns: columns,
                            {#classes: "table table-bordered table-striped",#}
                            data: rendertable(data["stg_obj_list"]),
                            height: 500,
                            search: true,
                            toolbar: "#toolbar",
                            toolbarAlign: "right",
                            //******前端分页设置****
                            pagination: true,
                            pageNumber: 1,
                            pageSize: 20,
                            pageList: [10, 20, 50, 200],
                            paginationHAlign: "right",
                            paginationDetailHAlign: "left"
                            //******前端分页设置****
                        })
                    } else {
                        alert(data["stg_obj_list"])
                    }
                }
            })
        }

        //渲染页面
        function rendertable(data) {
            var objlist = JSON.parse(data);
            var objtable = []
            for (let i = 0; i < objlist.length; i++) {
                objlist[i].fields["StgID"] = objlist[i].pk
                objtable.push(objlist[i].fields)
            }
            return objtable
        }

        var stgid = null

        //新建模态框
        function add_() {
            $("div.modal-body > input").val("")
            $("#create-stg").modal("show")
        }

        //删除策略模态框
        function del_(stg_id) {
            stgid = stg_id
            $("#del-stg").text("确认删除策略" + stgid + "?")
            $("#delete-stg").modal("show")
        }


        //模态框取消
        function fade_btn() {
            $("#create-stg").modal("hide")
            $("#delete-stg").modal("hide")
        }

        //新建策略
        function add_stg() {
            var stgname = $("#stgname").val()
            $.ajax({
                url: "/stg_add/",
                type: "post",
                data: {
                    "stgname": stgname
                },
                success: function (data) {
                    /*
                    * data 是一个字典，包括msg和type
                    * msg 对应 具体信息
                    * type 对应信息类型，包括成功和异常
                    * */
                    if (data["type"] === 1) {
                        var stgid = data["msg"]
                        window.location.href = "/detail/?stgid=" + stgid
                    } else if (data["type"] === 0) {
                        alert(data["msg"])
                    }
                }
            })
        }


        //删除策略
        function del_stg() {
            fade_btn()
            loadon()
            $.ajax({
                url: "/stg_del/",
                data: {
                    "stgid": stgid
                },
                type: "post",
                success: function (data) {
                    if (data === "y") {
                        getData()
                    } else {
                        alert(data)
                    }

                }
            })
        }

        //代码策略
        {#function code_stg(stgid) {#}
        {#    $.ajax({#}
        {#        url: "/detail/?stgid=" + stgid,#}
        {#        type: "get",#}
        {#    })#}
        {##}
        {# } #}

    </script>

    <style>

        .table-demo {
            width: 80%;
            margin: 0 auto 0px auto;
        }

        div.pull-right > input.
    </style>

{% endblock %}